.modal-cover {
  position: fixed;
  z-index : 100;
  left    : 0;
  top     : 0;
  width   : 100vw;
  height  : 100vh;
}

.modal-cover .mask {
  position        : absolute;
  left            : 0;
  top             : 0;
  width           : 100%;
  height          : 100%;
  background-color: rgba(51, 51, 51, 0.151);
  backdrop-filter : saturate(180%) blur(20px);
}

.modal-cover .body {
  position       : absolute;
  width          : 100%;
  padding        : 30px;
  animation      : appear 0.5s ease;
  display        : flex;
  flex-direction : row;
  justify-content: center;
  align-items    : flex-start;
  flex-wrap      : wrap;
}

.modal-cover .body>* {
  margin: 15px
}

@keyframes appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}